<div class="sd-head">
    <div class="sd-title-s">监控管理工具 / 服务器监控 / 新增服务器监控</div>
</div>
<div class="sd-body">
    <div class="animated sd-content">
        <form nz-form [formGroup]="form" class="common-formgroup">
            <nz-form-item>
                <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_host" nzRequired>服务器ip
                </nz-form-label>
                <nz-form-control [nzSm]="6" [nzXs]="30">
                    <input nz-input formControlName="t_host" id="t_host" placeholder="必填">
                    <nz-form-explain *ngIf="form.get('t_host').dirty && form.get('t_host').errors">
                        <ng-container *ngIf="form.get('t_host').hasError('required')">
                            请输入服务器ip
                        </ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_sshport" nzRequired>连接端口
            </nz-form-label>
            <nz-form-control [nzSm]="6" [nzXs]="30">
              <input nz-input formControlName="t_sshport" id="t_sshport" placeholder="必填">
              <nz-form-explain *ngIf="form.get('t_sshport').dirty && form.get('t_sshport').errors">
                <ng-container *ngIf="form.get('t_sshport').hasError('required')">
                  请输入连接端口
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_sshname" nzRequired>连接用户名
            </nz-form-label>
            <nz-form-control [nzSm]="6" [nzXs]="30">
              <input nz-input formControlName="t_sshname" id="t_sshname" placeholder="必填,最大长度为64">
              <nz-form-explain *ngIf="form.get('t_sshname').dirty && form.get('t_sshname').errors">
                <ng-container *ngIf="form.get('t_sshname').hasError('required')">
                  请输入连接用户名
                </ng-container>
                <ng-container *ngIf="form.get('t_sshname').hasError('maxlength')">
                  连接用户名长度不能超过64
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_sshpwd" nzRequired>连接密码
            </nz-form-label>
            <nz-form-control [nzSm]="6" [nzXs]="30">
              <input nz-input formControlName="t_sshpwd" id="t_sshpwd" placeholder="必填,最大长度为64">
              <nz-form-explain *ngIf="form.get('t_sshpwd').dirty && form.get('t_sshpwd').errors">
                <ng-container *ngIf="form.get('t_sshpwd').hasError('required')">
                  请输入连接密码
                </ng-container>
                <ng-container *ngIf="form.get('t_sshpwd').hasError('maxlength')">
                  连接密码长度不能超过64
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_hostname" nzRequired>服务器名称
                </nz-form-label>
                <nz-form-control [nzSm]="6" [nzXs]="30">
                    <input nz-input formControlName="t_hostname" id="t_hostname" placeholder="必填,最大长度为64">
                    <nz-form-explain *ngIf="form.get('t_hostname').dirty && form.get('t_hostname').errors">
                        <ng-container *ngIf="form.get('t_hostname').hasError('required')">
                            请输入服务器名称
                        </ng-container>
                        <ng-container *ngIf="form.get('t_hostname').hasError('maxlength')">
                            服务器名称长度不能超过64
                        </ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_groupid" [nzRequired]="true">服务器组
                </nz-form-label>
                <nz-form-control [nzSm]="6" [nzXs]="30">
                    <nz-select name="select-error" formControlName="t_groupid">
                        <nz-option *ngFor="let option of groups" [nzValue]="option.groupid"
                                   [nzLabel]="option.groupname"></nz-option>
                    </nz-select>
                    <nz-form-explain *ngIf="form.get('t_groupid').dirty && form.get('t_groupid').errors">
                        <ng-container *ngIf="form.get('t_groupid').hasError('required')">
                            请选择一个服务器组
                        </ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_description">描述
                </nz-form-label>
                <nz-form-control [nzSm]="6" [nzXs]="30">
                    <textarea formControlName="t_description" id="t_description" nz-input rows="6"
                              placeholder="最大长度为255"></textarea>
                    <nz-form-explain *ngIf="form.get('t_description').dirty && form.get('t_description').errors">
                        <ng-container *ngIf="form.get('t_description').hasError('maxlength')">
                            描述长度不能超过255
                        </ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_shells" >自定义脚本集合
                </nz-form-label>
                <nz-form-control [nzSm]="6" [nzXs]="30">
                    <input nz-input formControlName="t_shells" id="t_shells" placeholder="请输入自定义脚本名称，已逗号隔开">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item nz-row style="margin-bottom:8px;">
                <nz-form-control [nzOffset]="16" [nzSpan]="12">
                    <button nz-button nzType="dashed" (click)="test()" [nzLoading]="loadingTest">测试连接</button>
                    <button nz-button nzType="primary" (click)="submitForm()">提交</button>
                    <button nz-button (click)="back()">取消</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
</div>
